<template>
  <view>
    <u-navbar title="异常列表" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view class="sticky z-3 w-full" id="container" :style="{top:`${top}px`}">
      <u-tabs
          :bold="false"
          :current="tabsCurrent"
          :is-scroll="false"
          :list="tabList"
          active-color="#2D8CF0"
          bar-height="10"
          bar-width="350"
          duration="0"
          @change="change"
      ></u-tabs>
      <u-line
          color="#CCCCCC"
          length="94%"
          margin="-5rpx 0 0 20rpx"
      />
    </view>

    <abnormal-list-un-done v-if="tabsCurrent === 0" ref="listComponent"></abnormal-list-un-done>

    <abnormal-list-done v-else ref="listComponent"></abnormal-list-done>

  </view>
</template>

<script>
import getNavBarHeight from "@/mixins/getNavBarHeight";
import AbnormalListDone from "./components/abnormal-list-done";
import AbnormalListUnDone from "./components/abnormal-list-unDone";
export default {
  name: "abnormal-list",
  components: {AbnormalListUnDone, AbnormalListDone},
  mixins:[getNavBarHeight],
  data() {
    return {
      barStyle: {marginTop: 15 + "rpx"},
      tabsCurrent: 0,
      tabList: [{ name: "待解决",}, { name: "已解决",}],
    }
  },
  onReachBottom(){
    if(this.$refs.listComponent){
      this.$refs.listComponent.loadMore()
    }
  },
  methods:{
    change(index) {
      this.tabsCurrent = index;
    },
  }
}
</script>
<style lang="scss">
page{
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
</style>
